<template>
  <div class="_wrap">
    <div class="top">
      <subTit title="项目列表"/>
      <div class="tabs"> <span v-for="item in tabs" :key="item.value" :class="{ cur: item.value === curTab }" @click="tabClick(item.value)">{{item.label}}</span> </div>
    </div>
    <div class="_table">
      <table-scroll-pro
        :data="tableData"
        :columns="columns"
        :config= "config"
        :class-option="classOption">
        <template slot="eDate" slot-scope="{scope, row, data}">
          <span>{{data ? data : '未完工'}}</span>
        </template>
      </table-scroll-pro>
    </div>
  </div>
</template>

<script>
  import subTit from '../components/subTit'
  export default {
    name: 'itemCenterBottom',
    components: { subTit },
    data() {
      return {
        curTab: 1,
        tabs: [
          { label: '500万以上项目', value: 1 },
          { label: '500万以下项目', value: 2 }
        ],
        tableData:[],
        columns: [
          { label: '项目名称', prop: 'itemName', minWidth: 160, showOverflowTooltip: true },
          { label: '学校', prop: 'schoolName', minWidth: 70, showOverflowTooltip: true },
          { label: '金额(万元)', prop: 'amount', align: 'center' },
          { label: '进度', prop: 'schedule', align: 'center' },
          { label: '工期(天)', prop: 'duration', align: 'center' },
          { label: '开工日期', prop: 'sDate', align: 'center' },
          { label: '实际工期', slot: 'eDate', align: 'center' }
        ],
        classOption: {
          // autoPlay: false,
          limitMoveNum: 4, // 开始滚动的数量
          singleHeight: 48, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        },
        config:{
          rowHeight: 46 + 'px',
          headerHeight: 46 + 'px',
          rowBGC: 'rgba(7,124,220,.16)',
          stripeBGC: 'rgba(7,124,220,.04)'
        }
      }
    },
    mounted() {
      this.tabClick(1)
    },
    methods: {
      tabClick(val){
        this.curTab = val
        if(val===1){
          this.tableData = [
            { itemName: '实验幼儿园卢宅园区新建项目', schoolName: '实验幼儿园', amount: 8900, schedule: '25%', duration: 420, sDate: '2024-01-02',  eDate: '' },
            { itemName: '防军初中教学楼新建项目', schoolName: '防军初中', amount: 1400, schedule: '8%', duration: 300, sDate: '2024-03-26',  eDate: '' },
            { itemName: '巍山高中食堂报告厅及运动场新建项目', schoolName: '巍山高中', amount: 3500, schedule: '85%', duration: 350, sDate: '2023-02-18',  eDate: '' },
            { itemName: '下范小学食堂体艺楼及门卫新建项目', schoolName: '下范小学', amount: 1800, schedule: '45%', duration: 360, sDate: '2023-10-28',  eDate: '' },
            { itemName: '江北二小综合楼及体育馆新建项目', schoolName: '江北二小', amount: 2000, schedule: '65%', duration: 300, sDate: '2023-10-17',  eDate: '' }
          ]
        } else {
          this.tableData = [
            { itemName: '吴宁振兴路幼儿园630K高压配电工程', schoolName: '吴宁振兴路幼儿园', amount: 45, schedule: '100%', duration: 18, sDate: '2023-08-10',  eDate: '18' },
            { itemName: '南马镇中学生寝室及路面改造项目', schoolName: '南马镇中学', amount: 91.4, schedule: '100%', duration: 45, sDate: '2023-07-12',  eDate: '45' },
            { itemName: '横店三小食堂改造项目', schoolName: '横店三小', amount: 70, schedule: '100%', duration: 45, sDate: '2023-07-03',  eDate: '46' },
            { itemName: '湖沧小学食堂改造项目', schoolName: '湖沧小学', amount: 21.4, schedule: '100%', duration: 30, sDate: '2023-07-04',  eDate: '30' },
            { itemName: '后岭山小学北门新建及厕所改造项目', schoolName: '后岭山小学', amount: 80, schedule: '100%', duration: 45, sDate: '2023-07-05',  eDate: '45' }
          ]
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    .top {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
    }
    .tabs {
      display: flex; align-items: center;
      span {
        font-family: PingFangSC; cursor: pointer; transition: all .3s; white-space: nowrap;
         width: 160px; height: 30px; margin-left: 4px; background: #0D2246;
        border: 1px solid rgba(9,80,138,1); border-radius: 4px; display: flex; align-items: center; justify-content: center;
        &.cur {
          color: #ABF1FF; border: 1px solid rgba(83,226,255,1);
        }
      }
    }
    ._table {
      width: 100%; height: 190px;
    }
  }
</style>
